<template>
  <div>
    <tree-form
      tree-title="组织机构"
      v-model="data"
      :fields="fields"
      :validates="validates"
      @on-form-submit="handleSubmit"/>
  </div>
</template>
<script>
import TreeForm from '_vc/tree-form'
import { getTree, saveModel } from '@/api/admin/org'

export default {
  components: {
    TreeForm
  },
  data() {
    return {
      data: [],
      fields: [
        { label: '名称', prop: 'name', placeholder: '输入名称' },
        { label: '简称', prop: 'shortName', placeholder: '输入简称' },
        { label: '编码', prop: 'code', placeholder: '输入编码' },
        { label: '上级机构', prop: 'parentName', placeholder: '无', ro: true },
        { label: '层级', prop: 'level', placeholder: '层级', ro: true },
        { label: '启用', prop: 'enable', type: 'switch', defaultValue: 0 },
        { label: '备注', prop: 'remark', placeholder: '输入备注', type: 'textarea' }
      ],
      validates: {
        name: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ],
        code: [
          { required: true, message: 'The code cannot be empty', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit(obj, cb) {
      saveModel(obj).then(({ data: { data } }) => {
        console.log('Server return data: ', data)
        cb(data)
      })
    }
  },
  created() {
    getTree().then(({ data: { data } }) => {
      this.data = data
    })
  }
}
</script>
